<template>
  <div>
    <Row>
      <Col span="12">
        <h2>{{baseSituation}}</h2>
        <ul v-for="(item,index) in total" :key="index" class="base_total">
          <li><p>{{item.title}}</p><p>{{item.number}}</p></li>
        </ul>
        <ul class="distribution">
          <li v-for="(chart,index) in charts" :key="chart.id"  @click="handleClick(index)" class="base_total">
            <p>{{chart.title}}</p><chart class="Piechart" :options="chart.options"></chart>
          </li>
        </ul>
        <div style=" clear:both"></div>
        <Table border :columns="columns[selIndex]" :data="datas[selIndex]" ></Table>
      </Col>
      <Col span="12">
        <h2>{{baseTrend}}</h2>
        <h2>{{dishesTrend}}</h2>
      </Col>
    </Row>
  </div>
</template>

<script>
    export default {
        name: 'pies',
        data(){
            return{
                baseSituation: "基地态势",
                baseTrend: "基地时空趋势图",
                dishesTrend: "菜品时空趋势图",
                selIndex:0,
                charts:[
                    {
                        title:"基地分布",
                        id:"baseDistribution",
                        options:{
                            title: {
                                //text: '基地分布',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                bottom: 'bottom',
                                data: ['秀英区', '龙华区', '琼山区', '美兰区', '桂林洋']
                            },
                            series: [
                                {
                                    name: '基地分布',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '50%'],
                                    data: [
                                        {value: 335, name: '秀英区'},
                                        {value: 310, name: '龙华区'},
                                        {value: 234, name: '琼山区'},
                                        {value: 135, name: '美兰区'},
                                        {value: 1548, name: '桂林洋'}
                                    ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    },
                    {
                        title:"种植分布",
                        id:"plantingDistribution",
                        options:{
                            title: {
                                //text: '基地分布',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                bottom: 'bottom',
                                data: ['秀英区', '龙华区', '琼山区', '美兰区', '桂林洋']
                            },
                            series: [
                                {
                                    name: '基地分布',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '50%'],
                                    data: [
                                        {value: 335, name: '秀英区'},
                                        {value: 310, name: '龙华区'},
                                        {value: 234, name: '琼山区'},
                                        {value: 135, name: '美兰区'},
                                        {value: 1548, name: '桂林洋'}
                                    ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    },
                    {
                        title:"产量分布",
                        id:"yieldDistribution",
                        options:{
                            title: {
                                //text: '基地分布',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                bottom: 'bottom',
                                data: ['秀英区', '龙华区', '琼山区', '美兰区', '桂林洋']
                            },
                            series: [
                                {
                                    name: '基地分布',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '50%'],
                                    data: [
                                        {value: 335, name: '秀英区'},
                                        {value: 310, name: '龙华区'},
                                        {value: 234, name: '琼山区'},
                                        {value: 135, name: '美兰区'},
                                        {value: 1548, name: '桂林洋'}
                                    ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    },
                ],
                columns:[
                    [
                        {
                            type: 'index',
                            title: '序号',
                            width: 70,
                            align: 'center'
                        },
                        {
                            title: '基地名称',
                            key: 'name',
                            align: 'center'
                        },
                        {
                            title: '基地面积',
                            key: 'basearea',
                            align: 'center'
                        },
                        {
                            title: '大棚面积',
                            key: 'area',
                            align: 'center'
                        },
                        {
                            title: '联系人',
                            key: 'contact',
                            align: 'center'
                        }
                    ],
                    [
                        {
                            type: 'index',
                            title: '序号',
                            width: 70,
                            align: 'center'
                        },
                        {
                            title: '基地名称',
                            key: 'name',
                            align: 'center'
                        },
                        {
                            title: '种植面积',
                            key: 'plantingarea',
                            align: 'center'
                        }
                    ],
                    [
                        {
                            type: 'index',
                            title: '序号',
                            width: 70,
                            align: 'center'
                        },
                        {
                            title: '基地名称',
                            key: 'name',
                            align: 'center'
                        },
                        {
                            title: '产量',
                            key: 'yield',
                            align: 'center'
                        }
                    ],
                ],
                total: [
                    {
                        title: '基地总数量',
                        number: 127
                    },
                    {
                        title: '基地总面积',
                        number: 44390.64
                    },
                    {
                        title: '当月种植面积',
                        number: 31188.46
                    },
                    {
                        title: '当月总产量',
                        number: 19708.12
                    }
                ],
                datas:[
                    [
                        {
                            name: 'John Brown',
                            basearea: 18,
                            area: 'New York No. 1 Lake Park',
                            date: '2016-10-03',
                            contact: '张三丰'
                        },
                        {
                            name: 'Jim Green',
                            basearea: 24,
                            area: 'London No. 1 Lake Park',
                            date: '2016-10-01',
                            contact: '张三丰'
                        },
                        {
                            name: 'Joe Black',
                            basearea: 30,
                            area: 'Sydney No. 1 Lake Park',
                            date: '2016-10-02',
                            contact: '张三丰'
                        },
                        {
                            name: 'Jon Snow',
                            basearea: 26,
                            area: 'Ottawa No. 2 Lake Park',
                            date: '2016-10-04',
                            contact: '张三丰'
                        }
                    ],
                    [
                        {
                            name: 'John Brown',
                            plantingarea: 18
                        },
                        {
                            name: 'Jim Green',
                            plantingarea: 24
                        },
                        {
                            name: 'Joe Black',
                            plantingarea: 30
                        },
                        {
                            name: 'Jon Snow',
                            plantingarea: 26
                        }
                    ],
                    [
                        {
                            name: 'John Brown',
                            yield: 18
                        },
                        {
                            name: 'Jim Green',
                            yield: 24
                        },
                        {
                            name: 'Joe Black',
                            yield: 30
                        },
                        {
                            name: 'Jon Snow',
                            yield: 26
                        }
                    ]

                ],
            }
        },
        methods: {
            handleClick: function(idx) {
                this.selIndex=idx
            },

        },
        mounted () {

        }
    }
</script>

<style scoped>
  .base_total li{
    width: 25%;
    float: left;
    list-style: none;
  }
  .distribution li{
    width: 33.3%;
    float: left;
    list-style: none;
  }
  .Piechart{
    width: 100%;
    height: 260px;
  }
</style>
